<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.bomCode"
          clearable
          placeholder="BOM编号"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.bomName"
          clearable
          placeholder="BOM名称"
          style="width: 185px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select
          v-model="query.productCode"
          clearable
          filterable
          placeholder="产品型号"
          style="width: 185px"
          class="filter-item"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in productModel"
            :key="item.id"
            :label="item.productName"
            :value="item.productCode"
          ></el-option>
        </el-select>
        <el-select
          v-model="query.isDisable"
          style="width: 185px"
          class="filter-item"
          clearable
          filterable
          placeholder="是否禁用"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in dict.is_disable"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu > 0"
        :title="crud.status.title"
        width="500px"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="90px"
        >
          <el-form-item label="BOM编号" prop="bomCode">
            <el-input v-model="form.bomCode" style="width: 370px" />
          </el-form-item>
          <el-form-item label="BOM名称" prop="bomName">
            <el-input v-model="form.bomName" style="width: 370px" />
          </el-form-item>
          <el-form-item label="产品型号" prop="productCode">
            <el-select
              v-model="form.productCode"
              clearable
              filterable
              placeholder="产品型号"
              style="width: 370px"
              class="filter-item"
            >
              <el-option
                v-for="item in productModel"
                :key="item.id"
                :label="item.productName"
                :value="item.productCode"
              >
                <span style="float: left">{{ item.productName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.productCode
                }}</span></el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item label="是否禁用" prop="isDisable">
            <el-select v-model="form.isDisable" filterable placeholder="请选择">
              <el-option
                v-for="item in dict.is_disable"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="版本" prop="version">
            <el-input v-model="form.version" style="width: 370px" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input
              v-model="form.remark"
              :rows="3"
              type="textarea"
              style="width: 370px"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">取消</el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <el-empty
        v-show="!crud.data || crud.data.length == 0"
        description="暂无数据"
      ></el-empty>
      <!--渲染列表-->
      <el-row
        :gutter="20"
        v-show="crud.data && crud.data.length > 0"
        v-loading="crud.loading"
      >
        <el-col :span="6" v-for="(item, index) in crud.data" :key="item.id">
          <div class="grid-content bg-purple">
            <el-card class="box-card">
              <div class="top">
                <img src="@/assets/images/list.png" class="img" />
                <div class="content">
                  <div class="titleName">{{ item.bomName }}</div>
                  <div class="subTitle">BOM编号: {{ item.bomCode }}</div>
                  <div class="subTitle">产品型号: {{ item.productCode }}</div>
                  <div class="subTitle">
                    是否禁用:
                    <el-tag size="small" type="danger" v-if="item.isDisable === '1'">{{
                      dict.label.is_disable[item.isDisable]
                    }}</el-tag>
                    <el-tag size="small" v-if="item.isDisable === '0'">{{
                      dict.label.is_disable[item.isDisable]
                    }}</el-tag>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <el-button-group style="width: 70px;white-space:nowrap; ">
                  <i
                    class="el-icon-edit button"
                    style="cursor: pointer"
                    @click="toUrl(item.id)"
                  ></i>
                  <i
                    class="el-icon-delete button"
                    style="cursor: pointer"
                    @click="toDelete(item)"
                  ></i>
                </el-button-group>
                <div class="time">创建时间: {{ item.createTime }}</div>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <!--分页组件-->
      <pagination />
    </div>
  </div>
</template>

<script>
import crudProductBom from "@/api/product/productBom";
import crudProductModel from "@/api/product/productModel";
import CRUD, { presenter, header, form, crud } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import udOperation from "@crud/UD.operation";
import pagination from "@crud/Pagination";

const defaultForm = {
  id: null,
  bomCode: null,
  bomName: null,
  productCode: null,
  isDisable: null,
  version: null,
  remark: null,
  createBy: null,
  createTime: null,
  updateBy: null,
  updateTime: null,
};
export default {
  name: "ProductBom",
  components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ["is_disable"],
  cruds() {
    return CRUD({
      title: "制造BOM",
      url: "api/productBom",
      idField: "id",
      sort: "id,desc",
      optShow: {
        add: true,
        edit: false,
        del: false,
        download: false,
        reset: true,
        import: false,
      },
      crudMethod: { ...crudProductBom },
    });
  },
  data() {
    return {
      permission: {
        add: ["admin", "productBom:add"],
        edit: ["admin", "productBom:edit"],
        del: ["admin", "productBom:del"],
      },
      rules: {
        productCode: [
          { required: true, message: "产品编码不能为空", trigger: "change" },
        ],
        bomCode: [
          { required: true, message: "BOM编码不能为空", trigger: "blur" },
        ],
        bomName: [
          { required: true, message: "BOM名称不能为空", trigger: "blur" },
        ],
        version: [{ required: true, message: "版本不能为空", trigger: "blur" }],
        isDisable: [
          { required: true, message: "是否禁用不能为空", trigger: "blur" },
        ],
      },
      queryTypeOptions: [
        { key: "bomCode", display_name: "BOM编号" },
        { key: "bomName", display_name: "BOM名称" },
        { key: "productCode", display_name: "产品型号" },
        { key: "isDisable", display_name: "是否禁用 " },
      ],
      productModel: [],
    };
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true;
    },
    // 跳转至详情页
    toUrl(id) {
      this.$router.push({ path: "/product/bomDetail/" + id });
    },
    // 确认删除
    toDelete(data) {
      this.$confirm("确认删除该制造BOM吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.crud.doDelete(data);
        })
        .catch(() => {});
    },
  },
  mounted() {
    crudProductModel.list().then((data) => {
      this.productModel = data;
    });
  },
};
</script>

<style scoped>
.header-bottom {
  padding-bottom: 10px;
}
.el-card {
  margin-bottom: 15px;
}
.top {
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: PingFangSC-Regular;
}
.img {
  width: 64px;
  margin-right: 15px;
}
.content {
  overflow: hidden;
  flex: 1 1;
}
.titleName {
  font-size: 14px;
  color: #333;
  line-height: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subTitle {
  font-size: 12px;
  color: #555;
  line-height: 20px;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.descWrapper {
  font-size: 12px;
  color: #555;
  line-height: 20px;
  margin-bottom: 8px;
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.descContent {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  justify-content: flex-start;
}
.bottom .time {
  font-size: 13px;
  margin-left: 8px;
  color: #999;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bottom .button {
  font-size: 18px;
  padding: 0 7px;
}
.bottom .button:hover {
  color: #409eff;
}
</style>
